<template>
  <div :v-loading="loading">
    <div class="whiteBac mt10 p10">
      <el-button size="small" type="primary" @click="downLoadRewardList">导出Excel</el-button>
      <a :href="downLoadUrl" id="downLoadExcel" target="_blank"></a>
    </div>
    <div class="whiteBac mt20 p10">
      <el-form :inline="true" :model="searchForm" size="mini">
        <el-row :gutter="10">
          <el-col :sm="8" :xs="8" >
            <el-form-item>
              <el-input placeholder="请输入内容" v-model="searchForm.usersTypeCount" class="input-with-select">
                <el-select v-model="searchForm.usersType" style="width: 120px;" slot="prepend" placeholder="请选择">
                  <el-option label="用户手机" value="user_account"></el-option>
                  <!--<el-option label="用户ID" value="user_num"></el-option>-->
                  <el-option label="用户昵称" value="nickname"></el-option>
                  <el-option label="直播ID" value="lives"></el-option>
                  <el-option label="视频ID" value="video"></el-option>
                </el-select>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="8" :xs="8" >
            <el-form-item label="业务来源" label-width="70px">
              <el-select placeholder="请选择业务来源" v-model="searchForm.bz_source" style="width:180px">
                <el-option label="全部"  value=""></el-option>
                <el-option label="视频" value="1"></el-option>
                <el-option label="直播" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :sm="8" :xs="8" >
            <el-form-item label="打赏来源" label-width="70px">
              <el-select placeholder="请选择打赏来源" v-model="searchForm.rewardSource" style="width:180px">
                <el-option label="全部"  value=""></el-option>
                <el-option label="PC" value="1"></el-option>
                <el-option label="android" value="2"></el-option>
                <el-option label="ios" value="3"></el-option>
                <el-option label="web" value="4"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :sm="8" :xs="8">
            <el-form-item label="打赏数额" label-width="70px">
              <el-input-number v-model="searchForm.beginMoney" controls-position="right"  style="width:100px"    :min="0" :max="9999999"></el-input-number>
              至 <el-input-number   v-model="searchForm.endMoney" controls-position="right" style="width:100px"   :min="1" :max="9999999"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :sm="16" :xs="16">
            <el-form-item label="打赏时间" label-width="70px">
              <el-date-picker
                v-model="searchForm.rewardTime"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :sm="24" :xs="24">
            <el-button type="primary" size="small" @click="queryRewardList(1)">查询</el-button>
            <el-button size="small" @click="resetForm">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="whiteBac mt20 p10">
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="user_account"
          label="用户手机">
        </el-table-column>
        <!---->
        <!--<el-table-column-->
          <!--label="用户ID">-->
          <!--<template slot-scope="scope">-->
            <!--<a href="javascript:;" class="blue-color">{{scope.row.user_num}}</a>-->
          <!--</template>-->
        <!--</el-table-column>-->
        <!---->
        <el-table-column
          prop="nickname"
          label="用户昵称">
        </el-table-column>
        <el-table-column
          label="视频ID">
          <template slot-scope="scope">
            <span v-if="scope.row.bz_source=='1'">{{scope.row.bzsource_num}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="直播ID"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.bz_source=='0'">{{scope.row.bzsource_num}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="打赏来源"
          width="100px"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.client_source=='1'">pc</span>
            <span v-if="scope.row.client_source=='2'">android</span>
            <span v-if="scope.row.client_source=='3'">ios</span>
            <span v-if="scope.row.client_source=='4'">web</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="reward_count"
          label="打赏珍珠">
        </el-table-column>
        <el-table-column
          prop="real_count"
          label="获得珍珠">
        </el-table-column>
        <el-table-column
          prop="time"
          width="160px"
          label="打赏时间">
        </el-table-column>
      </el-table>
      <div class="mt10 tc">
        <page-pagination :page="page" :pageSize="pageSize" :total="total" v-on:pageFun="handleCurrentChange"></page-pagination>
      </div>
    </div>
  </div>

</template>

<script>
  import service from '@/service/index'
  import {  } from '@/base/utils'
  import pagePagination from '@/components/AG_Common/pagePagination.vue'
  export default {
    data(){
      return{
        loading:false,
        tableData:[],
        searchForm:{
          usersTypeCount:'',
          usersType:'user_account',
          bz_source:'',
          rewardSource:'',
          beginMoney:0,
          endMoney:9999,
          rewardTime:[]
        },
        downLoadUrl:'',
        total:14,
        pageSize:10,
        page:1,
      }
    },
    mounted(){
      this.queryRewardList(1);
    },
    components:{
      pagePagination
    },
    methods:{
      handleCurrentChange(val){
        this.queryRewardList(val);
      },
      downLoadRewardList(){
        this.loading = true;
        service.haiBeiServerExportRewardList({}).then(res => {
          if (res.success) {
            let params = {
              file:res.result.file,
              showName:res.result.showName
            }
            this.loading = false;
            this.downLoadUrl = service.haiBeiServerDownloadFile(params);
            let downLoadExcel = document.getElementById("downLoadExcel");
            setTimeout(()=>{
              downLoadExcel.click();
            },600)
            //this.$message({type: "success",message: '导出成功'});
          }else{
            this.$message({type:'error', message:res.msg});
            return;
          }
        });
      },
      queryRewardList(page=1){
        let params = {
          user_account:this.searchForm.usersType=='user_account'?this.searchForm.usersTypeCount:'',
          user_num:this.searchForm.usersType=='user_num'?this.searchForm.usersTypeCount:'',
          nickname:this.searchForm.usersType=='nickname'?this.searchForm.usersTypeCount:'',
          bzsource_num:(this.searchForm.usersType=='lives'||this.searchForm.usersType=='video')?this.searchForm.usersTypeCount:'',
          client_source:this.searchForm.rewardSource,
          bz_source:this.searchForm.bz_source,
          reward_count_begin:this.searchForm.beginMoney.toString(),
          reward_count_end:this.searchForm.endMoney.toString(),
          time_begin:this.searchForm.rewardTime?this.searchForm.rewardTime[0]:'',
          time_end:this.searchForm.rewardTime?this.searchForm.rewardTime[1]:'',
          page:page,
          pageSize:this.pageSize
        }
        //let params = Object.assign(typeParams,baseParams);
        //console.table(params);
        service.haiBeiServerQueryRewardRecordList(params).then(res => {
          if (res.success) {
            this.page = res.result.page;
            this.total = res.result.nums;
            this.tableData = res.result.pageList;
          }else{
            this.$message({type:'error', message:res.msg});
            return;
          }
        });
      },
      resetForm(){
        this.searchForm.usersTypeCount='';
        this.searchForm.usersType='user_account';
        this.searchForm.bz_source='';
        this.searchForm.rewardSource='';
        this.searchForm.beginMoney=0;
        this.searchForm.endMoney=9999;
        this.searchForm.rewardTime='';
      }
    }
  }
</script>

<style scoped>

</style>
